<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{num}}</h1>
    <button @click="num++">+</button>

    <myheader></myheader>
  </div>

  <template id="header">
    <div>
      <hr>
      <li>组件</li>
      <button @click="a++">+</button>
      {{a}}
      <hr>
    </div>
  </template>
</body>
<script>
  const { createApp,ref } = Vue;

  const app = createApp ({
    setup() {
      let num = ref(0)
      return{
        num
      }
    }
  }) 

  //全局组件 中央特派
  // 起名字尽量写成两个单词组成的名字 如：'myheader'
  // 全局组件是自己独立的小宇宙(隔离)
  // component 组件
  app.component('myheader',{
    setup () {
      let a = ref(0)

      function add () {
        a.value++
      }
      return {
        a,add
      }
    },
    template:'#header'  //输出为template id="header"
    // 也就是说template后面输入的这个值为页面中id调用的值
  })

  app.mount('#app')
</script>
</html>